<%@ include file="/common/taglibs.jsp"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="<c:url value="/css/shopadmin.css"/>" type="text/css" />
		<link rel="stylesheet" href="<c:url value='/scripts/themes/base/jquery.ui.all.css'/>" type="text/css" />
	</head>
	<body>
		<div class="head_content" id="headBar"  ></div>
		<div class="main_content" id="main"  > 
			<form method="post" action="gd_specification_save.html" id="spec_form">
				<input type="hidden" value="${goodsSpecification.specId }" name="goodsSpecification.specId" />
				<input type="hidden"  name="goodsSpecification.alias" value="not use" class="x-input " />
				<input type="hidden"   value="1" name="goodsSpecification.specShowType" />
				<div class="division">
					<table width="100%" cellspacing="0" cellpadding="0" border="0">
						<tbody>
							<tr>
								<th>
									<fmt:message key="gd_specfication.name" />
								</th>
								<td>
									<input type="text" value="${goodsSpecification.specName }" name="goodsSpecification.specName" class="x-input" />
								</td>
							</tr>
							<tr>
								<th>
									<fmt:message key="gd_specfication.description" />
								</th>
								<td>
									<input type="text" name="goodsSpecification.specDescription" value="${goodsSpecification.specDescription }" class="x-input " />
								</td>
							</tr> 
							<tr>
								<th>
									<fmt:message key="gd_specfication.type" />
								</th>
								<td>
									<div class="spec_type">
										<label>
											<input type="radio" <c:if test="${empty goodsSpecification.specType or goodsSpecification.specType == 1}">checked="checked"</c:if> value="1" onclick="changeTableClass(1)"
												name="goodsSpecification.specType" />
											<fmt:message key="gd_specfication.specType1" />
										</label>
										&nbsp; &nbsp;
										<label>
											<input type="radio" <c:if test="${not empty goodsSpecification.specType and goodsSpecification.specType == 2}">checked="checked"</c:if> value="2" onclick="changeTableClass(2)"
												name="goodsSpecification.specType" />
											<fmt:message key="gd_specfication.specType2" />
										</label>
									</div>
								</td>
							</tr> 
						</tbody>
					</table>
					<!--img src=""-->
				</div>
				<div style="padding-left: 10px;">
					<span class="sysiconBtn add addspec" onclick="addtr()"><fmt:message key="button.add" />
						<fmt:message key="gd_spec.value" />
					</span>
				</div>
				<div class="division">
					<table cellspacing="0" cellpadding="0" border="0" id="spec_value" class="gridlist sepc_value_table text-spec-value-table">
						<thead>
							<tr>
								<th>
									<fmt:message key="gd_spec.value" />
								</th> 
								<th class="simg-col">
									<span><fmt:message key="gd_specValue.pic" /><span></span> </span>
								</th>
								<th>
									<fmt:message key="gd_specfication.operation" />
								</th>

							</tr>
						</thead>
						<tbody>
							<c:forEach var="list" items="${goodsSpecValuess}" varStatus="indexList">
								<tr>
									<td style="vertical-align: middle;">
										<input type="hidden" value="${list.specValueId }" name="goodsSpecValuess[${indexList.index }].specValueId" />
										<input type="hidden" value="${list.specId }" name="goodsSpecValuess[${indexList.index }].specId" />

										<input type="text" maxlength="20" style="width: 150px;" value="${list.specValue }" name="goodsSpecValuess[${indexList.index }].specValue"
											class="x-input {required:true,  messages:{required:'<fmt:message key="form_validate.required" />'} }" />
									</td>
									 
									<td width="400" class="simg-col"> 
										<span><img width="30" height="30" id="specValueImg_${indexList.index }" src="<c:url value="${list.specImage}"/>" class="spec_pic" /> <input type="hidden" value="${list.specImage }"
												name="goodsSpecValuess[${indexList.index }].specImage" /> <span class="sysiconBtn edit sel_image" onclick="openDialog('${indexList.index }')" style="margin-bottom: 10px;"><fmt:message
													key="button.add" />
										</span> </span>
									</td>
									<td style="vertical-align: middle;">
										&nbsp; &nbsp;
										<img style="cursor: pointer;" onclick="deltr(this,${list.specValueId })" title="<fmt:message key="button.delete" />" class="delete"
											src="<c:url value="/images/statics/icons/icon_delete.gif"/>" />
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<div class="table-action">
					<button class="btn" type="submit">
						<span><span><fmt:message key="button.save" /> </span> </span>
					</button>
				</div>
			</form>

		</div>
		<div id="dialog-form" title='<fmt:message key="button.upload" />'>
			<input id='for_img_id' value='' type='hidden' />
			<span id="spanButtonPlaceholder1"></span>
			<br />
			<span id="selected_pic"></span>
		</div>
		<div class="foot_content" id="footBar"  ></div>
		<script type="text/javascript">
			String.prototype.replaceAll = function(s1, s2) {
				return this.replace(new RegExp(s1, "gm"), s2);
			}
			function FileProgress(file,fileListID,swfUploadInstance) {
				document.getElementById("selected_pic").innerHTML=file.name;		
			}
		
		</script>

		<script type="text/javascript" src="<c:url value='/scripts/jquery-1.4.2.js'/>"></script>

		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.core.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.widget.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.mouse.js'/> "></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.button.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.draggable.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.position.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.dialog.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.effects.core.js'/> "></script>
		<script type="text/javascript" src="<c:url value='/scripts/jquery.validate.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/jquery.metadata.js'/>"></script>

		<script type="text/javascript" src="<c:url value="/swfupload/js/swfupload.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/swfupload/js/swfupload.queue.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/swfupload/js/fileprogress.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/swfupload/js/handlers.js"/>"></script>
		<%@ include file="/jsp/admin/common/messages.jsp"%>
		<script type="text/javascript">
	
	
		    function uploadSpecValueSuccess(file, serverData){		        	
					try {
						var obj =$('#for_img_id').attr('value');			
						var img = document.getElementById("specValueImg_"+ obj);
						img.src= serverData ;
						document.getElementById("selected_pic").innerHTML='';
						$("input[name='goodsSpecValuess["+obj+"].specImage']").attr("value", serverData);						
						$('#dialog-form').dialog('close');
					} catch (ex) {
						
						this.debug(ex);
					}        
		    }
       var swfu;
       var settings = {
            
            // Flash Settings
			flash_url : "<c:url value="/swfupload/js/swfupload.swf"/>",
            upload_url : "<c:url value="/swfUpload.html"/>",
			post_params : {
				"modelType" : "goodsSpec"
			},
			file_post_name : "file",
			
			http_success : [201, 202], 
			assume_success_timeout : 0,
			// File Upload Settings
			file_size_limit : "5MB", // MB			 
			file_types : "*.*",
			file_types_description : "All Files",
			file_upload_limit : "10",
			file_queue_limit : "0",

			// Event Handler Settings (all my handlers are in the Handler.js file)
			file_dialog_start_handler : fileDialogStart,
			file_queued_handler : fileQueued,
			file_queue_error_handler : fileQueueError,
			file_dialog_complete_handler : fileDialogComplete,
			upload_start_handler : uploadStart,
			upload_progress_handler : uploadProgress,
			upload_error_handler : uploadError,
			upload_success_handler : uploadSpecValueSuccess,
			upload_complete_handler : uploadComplete,

			// Button Settings
			button_image_url : "<c:url value="/swfupload/images/XPButtonUploadText_61x22.png"/> ",
			button_placeholder_id : "spanButtonPlaceholder1",
			button_width : 61,
			button_height : 22,
			// Debug Settings
			auto_upload:false,
			
        };

       
        function initSWF() {
            swfu = new SWFUpload(settings);
        }

        
        function startUpload(){  
			swfu.startUpload();			
        }
        
        $(function() {
		
		
			$("#dialog-form").dialog({
				autoOpen: false,
				height: 200,
				width: 320,
				modal: true,
				buttons: {
					
					'<fmt:message key="button.close" />': function() {
						$(this).dialog('close');
					},
					'<fmt:message key="button.upload" />': function() {					
						startUpload();
					}
				},
				close: function() {
						 
				}
			});
		});
        
        function openDialog(i_id){			
			$('#for_img_id').attr('value',i_id);
			$('#dialog-form').dialog('open');
		}
        
        
        initSWF(); 

	var spec_index = ${fn:length(goodsSpecValuess)};
	function addtr(){

		var str = '<tr ><input type="hidden" value="" name="goodsSpecValuess['+spec_index+'].specValueId">'+
		  '<input type="hidden" value="" name="goodsSpecValuess['+spec_index+'].specId">'+
		  '<td width="400" style="vertical-align: middle;"><input type="text"  size="28" style="width: 150px;"  class="_x_ipt {required:true,  messages:{required:\'<fmt:message key="form_validate.required"/> \'}  }" name="goodsSpecValuess['+spec_index+'].specValue"></td>'+
		  '<td class="simg-col"><span><input type="hidden"   name="goodsSpecValuess['+spec_index+'].specImage"  />  <img id="specValueImg_'+spec_index+'" width="30" height="30" src=""  class="spec_pic" /> '+ 
		  ' &nbsp;&nbsp;<span class="sysiconBtn edit sel_image" onclick=openDialog("'+spec_index+'") ><fmt:message key="button.add" /></span></span></td>'
		  +'<td style="vertical-align: middle;">&nbsp; &nbsp; <img style="cursor: pointer;" title="<fmt:message key="button.delete" />" onclick="deltr(this,0)" class="delete" src="<c:url value="/images/statics/icons/icon_delete.gif"/>"></td></tr>';
		$('#spec_value').append(str);
		spec_index++;
	}


function deltr(obj,specValueId){
	if(!confirm('<fmt:message key="common.confirm_deleted" />')){
			return;
	}
	if(specValueId!=0){
		var url = "gd_specValue_delete.html";
		var params = {
			"specValueId" : specValueId
		};

		$.getJSON(url, params, 
			function callback(data) 
			{
				var flag = data.successFlag;
				var returnString='';
					if(flag){
						returnString = '<fmt:message key="common.deleted" />'; 
						$(obj).parent().parent().remove();
					}else{ 
						returnString = '<fmt:message key="gd_specfication.delete_fail" />'; 
					}
					showCallbackResult(returnString);			
				
			}
		);
		
	}else{
		$(obj).parent().parent().remove();
	}
	
	
}

function deleteSpecValue(specValueId) {
		
		
}
function changeTableClass(obj){
	if(obj==1){
		$("#spec_value").attr("class","gridlist sepc_value_table text-spec-value-table");
	}else{
		$("#spec_value").attr("class","gridlist sepc_value_table image-spec-value-table");
	}

}


var val  =$("input[type='radio'][name='goodsSpecification.specType'][checked='checked']").val();
changeTableClass(val);

 
	

$(document).ready(function() {
 	var validator = $("#spec_form").validate({
		errorElement: "div" ,
		errorClass: "x-vali-error",
		onfocusout: false,
		rules: {
			'goodsSpecification.specName' :	"required",	
			'goodsSpecification.specDescription' : "required",			 
			'goodsSpecification.alias' : {
				required: true				 
			} 
		},
		messages: {
			'goodsSpecification.specName':'<fmt:message key="form_validate.required" />',			 
			'goodsSpecification.specDescription': '<fmt:message key="form_validate.required" />',	
			'goodsSpecification.alias': '<fmt:message key="form_validate.required" />'
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			element.removeClass('x-vali-error');
			error.appendTo( element.parent());
			
			
		}, 
		success: function(div) {	 
			$(div).remove();
		}
	});
});

</script>

	</body>
</html>